<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Beehive</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/beehive/css/login.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/vue.js}"></script>

    <script th:inline="javascript" th:if="${session.loginUser != null}">
        location.href = "/index";
    </script>

</head>
<body>

<div class="container-fluid">
    <div class="single-bg"></div>
    <div class="main border rounded shadow">
        <div style="display: inline-block; float: left">
            <div style="float:left; width:680px; padding-left:30px;">
                <img th:src="@{/img/login.jpg}" style="width:100%; height:100%;">
            </div>
        </div>
        <!-- 用户名 -->
        <div id="app" style="display: inline-block; margin-top:60px; margin-left: 20px;">
            <div style="margin: 10px auto 0; width: 200px;">
                <p style="text-align: center; font-size: 1.5em;">Beehive 登录</p>
            </div>
            <div style="margin: 10px auto 0; width: 200px;">
                <span id="tip" style="color: red">[[${msg}]]</span>
            </div>
            <div style="margin-left: 20px; margin-top: 10px;" class="form-inline">
                <div style="display: inline-block; margin:10px 10px">
                    <img th:src="@{/img/user.png}">
                </div>
                <input type="text" class="form-control form-control-sm" id="account" placeholder="用户名或手机号">
            </div>
            <div style="margin-left: 20px; margin-top:10px;" class="form-inline">
                <div style="display:inline-block; margin:10px 10px">
                    <img th:src="@{/img/password.png}">
                </div>
                <input type="password" class="form-control form-control-sm" id="password" placeholder="密&#12288;码">
            </div>
            <div style="margin-left: 20px; margin-top:10px;" class="form-inline">
                <div style="display: inline-block; margin:10px 10px">
                    <img th:src="@{/img/vertificationCode.png}">
                </div>
                <input type="text" class="form-control form-control-sm" id="randomCode" placeholder="验证码"
                       style="width: 80px">
                <div style="width: 90px; height: 30px; margin-left: 26px;">
                    <img th:src="@{/randomCode}" width="70" height="30" title="看不清？换一张" id="code"
                         onclick="refreshCode()" class="rounded">
                </div>
            </div>
            <div style="margin: 0 0 0 20px; width: available; text-align: right">
                    <a class="nav-link" style="font-size: 8px;" th:href="@{/sign_up}">注册一个！</a>
            </div>
            <div class="form-inline">
                <div style="margin: 10px auto 22px;">
                    <input type="button" id="loginBtn" class="loginBtn" value="login"
                           onmouseover="highlight()" onmouseout="recover()" @click="showInfo">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 注意JS文件顺序 -->
<script th:src="@{/beehive/js/login.js}"></script>

<script th:inline="javascript">


    console.log([[${session.url}]])

    //<![CDATA[
    let vm = new Vue({
        el: '#app',
        methods: {
            // 定义事件处理方法
            showInfo() {
                let loginBtn = $("#loginBtn");
                // 设置用户点击时按钮边缘阴影效果
                loginBtn.css("box-shadow", "0 0 0 0.2rem rgba(0, 123, 255, 0.25)");
                // 获取用户输入的元素
                let account = $("#account");
                let password = $("#password");
                let randomCode = $("#randomCode");
                // 控制用户登录请求
                let flag = [false, false, false];
                // JSON对象保存数据
                let user = {};
                // 以下代码判断用户输入有效性并设置样式
                if (account.val() == null || account.val() === "") {
                    flag[0] = true;
                    showTip(account, "请输入用户名或号码！");
                } else {
                    flag[0] = false;
                    user.account = account.val();
                    this.hideTip(account);
                }

                if (password.val() == null || password.val() === "") {
                    flag[1] = true;
                    showTip(password, "请输入密码！");
                } else {
                    flag[1] = false;
                    user.password = password.val();
                    this.hideTip(password);
                }

                if (randomCode.val() == null || randomCode.val() === "") {
                    flag[2] = true;
                    showTip(randomCode, "验证码！");
                } else {
                    flag[2] = false;
                    user.randomCode = randomCode.val();
                    this.hideTip(randomCode);
                }

                // 用户输入不完整，结束函数
                if (flag[0] || flag[1] || flag[2]) {
                    return;
                }

                $.ajax({
                    url: "/user/login",
                    type: "post",
                    data: JSON.stringify(user),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (ret) {
                        console.log(ret);
                        console.log(ret.code);
                        if (ret.code === 200) {
                            // 登录成功，判断是否访问过限制页面
                            let url = [[${session.url}]]
                            if (url != null) {
                                setTimeout(function () {
                                    location.href = "" + url + "";
                                }, 1800);
                            } else {
                                location.href = "/index.html";
                            }
                        }
                        // 状态码1004表示账号或密码错误
                        if (ret.code === 1004) {
                            $("#tip").text("账号或密码错误！");
                        }
                        if (ret.code === 1003) {
                            $("#tip").text("验证码错误！");
                        }
                        if (ret.code === 0) {
                            $("#tip").text("该账号被禁用，请联系站长!");
                        }
                    }
                })
            },

            // 隐藏提示框样式
            hideTip: function (obj) {
                obj.css("border-style", "");
                obj.css("border-color", "");
                obj.css("box-shadow", "");
            }
        }
    });
    //]]>

</script>
</body>
</html>